<template>
    <!-- 歌手详情页 -->
    <div id="inSong">
        <Nav></Nav>
        <div class="body">
            <div class="top">
                <div class="songImgDiv">
                    <img :src="'/api/' + songImg" alt="" class="songImg">
                </div>
                <div class="text">
                    <span>歌手名：{{ singerName }}</span><br>
                    <el-button class="but" @click="playAll">全部播放</el-button> 
                </div>
            </div>
            <div>
                <el-table :data="songList" stripe highlight-current-row class="table">
                <el-table-column type="index" :index="indexMethod" width="80">
                </el-table-column>
                <el-table-column prop="songName" label="歌曲" width="320">
                </el-table-column>
                <el-table-column prop="singerName" label="歌手" width="300">
                </el-table-column>
                <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="favorites(scope.$index, scope.row)">
                            收藏
                        </el-button>
                        <el-button size="mini" @click="play(scope.$index, scope.row)">
                            播放
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="时长">
                </el-table-column>
            </el-table>
            </div>
            <!-- 评论 -->
            <div>
                <span>评论</span>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import Nav from "../components/nav.vue";
import Footer from "../components/footer.vue";
import { mapState, mapMutations } from "vuex";
export default {
    data() {
        return {
            id: this.$route.query.id,
            songImg: "",
            singerName: "",
            songWord: [],
            songName: "",
            songList:null,
        }
    },
    components: {
        Nav,
        Footer
    },
    computed:{
        ...mapState("user", ["user"])
    },
    methods: {
        indexMethod(index) {
            return index + 1;
        },
        favorites: function (index, row) {
            this.axios({
                url: "/api/users/songLike",
                params: {
                    songID: row.songsID,
                    userID: this.user.userID
                }
            }).then(res => {
                if (res.data.code == 401) {
                    this.userDel()
                    this.$message({
                        message: '请先登录',
                        type: 'warning'
                    });
                } else {
                    this.$message({
                        message: '收藏成功',
                        type: 'success'
                    });
                }
            }).catch(err => {
                console.log("歌曲收藏错误", err);
            })
        },
        playAll: function () {
            // console.log(this.songData);
            let arr = [];
            this.songList.forEach(i => {
                arr.unshift(i)
            });
            // arr.push(this.songData)
            // console.log(arr);
            arr.forEach(x => {
                let song = {
                    name: x.songName,
                    artist: x.singerName,
                    url: '/api/' + x.url,
                    cover: '/api/' + x.imgUrl,
                    lrc: x.songWord,
                    songsId: x.songsID,
                    time: x.time
                };
                for (const i in this.$audio) {
                    if (this.$audio[i].songsId == x.songsID) {
                        this.$audio.splice(i, 1);
                        break;
                    }
                }
                this.$audio.unshift(song)
            });
            // console.log(this.$audio);
            this.$router.push("/music")
            // this.$audio = 
        },
    },
    created: function () {
        this.axios({
            url: "/api/listens/searchSong",
            params: {
                songsName: this.id
            }
        }).then(res => {
            console.log(res.data.data.data[0]);
            this.singerName = res.data.data.data[0].singerName
            this.songImg = res.data.data.data[0].singerImg
            this.songList = res.data.data.data
            // this.songData = res.data.data.data
            // this.songImg = res.data.data.data.imgUrl
            // this.singerName = res.data.data.data.singerName.join()
            // this.songName = res.data.data.data.songName
            // res.data.data.data.songWord.split("[").forEach(i => {
            //     this.songWord.push(i.split("]")[1])
            // });
        }).catch(err => {
            console.log("歌手错误");
        })
    }
};
</script>

<style>
#inSong {
    text-align: center;
    margin: 0px;
    padding: 0px;
}

#inSong .body {
    width: 80%;
    background: plum;
    margin: 10px auto;
    /* text-align: left; */
    display: flex;
    flex-wrap: wrap;
}

#inSong .body .top {
    width: 100%;
    /* flex-grow: 1; */
    display: flex;
    text-align: left;
    margin: 40px 0px;
}

#inSong .body .top .songImgDiv {
    margin: 0px auto;
    flex-grow: 1;
}

#inSong .body .top .songImgDiv .songImg {
    width: 250px;
    height: 250px;
    margin-left: 40px;
}

#inSong .body .top .text {
    /* margin-left: 20px; */
    flex-grow: 4;
}

#inSong .body .top .text .but {
    margin-top: 80px;
}
</style>